<script setup>
import { ref } from 'vue'
const orders = ref([
    { orderId: '10001', username: 'user1', totalAmount: 199.99, status: '已支付' }
])
const orderDialogVisible = ref(false)
const orderForm = ref([
    { id: 1, number: '1111', price: 100, stock: 50 },
    { id: 2, number: '2222', price: 200, stock: 30 },
]);
</script>
<template>
    <el-card class="management-container">
        <template #header>
            <div class="header-wrapper">
                <span class="header-title">订单管理</span>
            </div>
        </template>
        <el-table :data="orders" border>
            <el-table-column prop="orderId" label="订单号" />
            <el-table-column prop="username" label="用户" />
            <el-table-column prop="totalAmount" label="总金额" />
            <el-table-column prop="status" label="状态" />
            <el-table-column label="操作" width="150">
                <template #default>
                    <el-button size="small">详情</el-button>
                    <el-popconfirm title="确认取消?" confirm-button-text="确认" cancel-button-text="取消" @confirm="confirm">
                        <template #reference>
                            <el-button size="small" type="danger">取消</el-button>
                        </template>
                    </el-popconfirm>
                </template>
            </el-table-column>
        </el-table>
    </el-card>
</template>
<style lang="scss" scoped>
.management-container {
    .header-wrapper {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0 16px;

        .header-title {
            font-size: 18px;
            font-weight: 500;
        }

        .action-buttons {
            display: flex;
            gap: 8px;
        }
    }

    .el-table {
        margin-top: 20px;
    }
}
</style>